<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .gray{
            background: #eee;
        }
        .red{
            color:red;
        }
        .yellow{
            color:yellow;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <p v-cloak>{{num}}</p> -->
        <!-- {{}} 可以放表达式，不能放语句 -->
        {{num>60?'及格':'不及格'}}
        <!-- vue里指令会以标签属性的形式出现类似自定义属性，vue指令：v-xxx 特定功能-->
        <span v-text="numStr"></span>
        <span v-html="numStr"></span>

        <!-- 条件指令：v-if  v-else-if  v-else -->

        <div>
            <span v-if="num>=90">优秀</span>
            <span v-else-if="num<90&&num>=60">及格</span>
            <span v-else>不及格</span>
        </div>

        <!-- template -->
        <template v-if="role==='username'">
            <label>用户名</label>
            <input type="text" placeholder="请输入用户名">
        </template>

        <template v-else>
            <label>邮箱</label>
            <input type="text" placeholder="请输入邮箱">
        </template>

        <!-- 循环指令 v-for array object number string v-for比v-if的优先级高-->
        <!-- :class 1>对象{样式1：条件，样式2：条件} 2>数组 3>data里的属性名-->

        <input type="text" placeholder="请输入电影名" v-model="movieName">
        <input type="text" placeholder="价格" v-model="price">
        <button @click="add">添加</button>
        <ul>
            <!-- <li :class="['red',{'gray':index%2===0}]" v-for="(item,index) in movies" v-if="item.isUp">{{index+1}}{{item.name}}---{{item.price}}</li> -->
            <li :class="className" v-for="(item,index) in movies" v-if="item.isUp">{{index+1}}{{item.name}}---{{item.price}}
                <button @click="del(index)">删除</button>
            </li>
        </ul>

        <!-- <ul>
            <li v-for="(val,key,index) in obj">{{index+1}}{{val}}---{{key}}</li>
        </ul>

        <ul>
            <li v-for="(item,index) in num">{{index}} ---- {{item}}</li>
        </ul>

        <ul>
            <li v-for="(item,index) in role">{{index}}----{{item}}</li>
        </ul> -->

        <!-- 属性绑定指令 v-bind-->

        <!-- <img v-bind:src="imgUrl">-->
        <!-- 缩写 -->
        <!--<img :src="imgUrl" :style="style"> -->

        <a :href="url">去百度</a>

        <!-- v-model 数据双向绑定 表单元素  value -->

        <!-- v-on:事件名  简写成@事件名 -->

        <!-- <input type="text" placeholder="请输入用户名" v-bind:value="username" v-on:input="inputFun($event)"> -->
        <input type="text" placeholder="" v-model="username">
        <p>{{username}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        // MVVM  M:数据层  V：视图层  VM：数据双向绑定
        let vm = new Vue({
            el:'#app',      //挂载元素  根元素
            data:{          //data存储数据
                num:50,
                numStr:'<p>70</p>',
                role:'username',
                className:'yellow',
                username:'lili',
                obj:{
                    name:'飞驰人生',
                    price:'58.00',
                    isUp:true
                },
                style:{
                    width:'100px',
                    height:'100px'
                },
                movies:[
                    {
                        name:'飞驰人生',
                        price:'58.00',
                        isUp:true
                    },
                    {
                        name:'流浪地球',
                        price:'58.00',
                        isUp:true
                    },
                    {
                        name:'疯狂的外星人',
                        price:'50.00',
                        isUp:true
                    }
                ],
                imgUrl:'https://cn.vuejs.org/images/logo.png',
                url:'http://baidu.com',
                movieName:'',
                price:''
            },
            methods:{
                inputFun(e){
                    this.username = e.target.value;
                },
                add(){
                    this.movies.push({
                        name:this.movieName,
                        price:this.price,
                        isUp:true
                    })
                },
                del(index){
                    this.movies.splice(index,1);
                }
            }
        })
    </script>
</body>
</html>